.journal-detail-container {

  &.journal-detail-container-hidden {
    background-color: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px 4px 4px 4px;
    padding: 16px;

    .journal-detail-header {
      display: none;
    }

    .journal-detail-content .journal-detail-content-navs-wrap {
      display: none;
    }

    .journal-article-detail-container .journal-article-page {
      box-shadow: none;
      border-radius: 0;
    }
  }

  .journal-detail-header {
    height: 357px;
    padding: 48px 0 0 0;


    .journal-detail-info {
      display: flex;
      gap: 22px;

      .journal-detail-info-cover {
        display: block;
        width: 200px;
        aspect-ratio: 182/242;

        .ant-image {
          width: 100%;
          height: 100%;
          display: block;

          .ant-image-img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }

      .journal-detail-info-body {
        margin: 0 0 4px 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 1px;

        .journal-detail-info-header {
          display: flex;
          flex-direction: column;

          .journal-detail-info-title {
            display: block;

            .ant-typography {
              font-weight: 600;
              font-size: 40px;
              color: #FFFFFF;
              line-height: 47px;

              text-underline-offset: 16px;
              text-decoration: underline solid #FFFFFF 3px;
              padding-bottom: 28px;
              margin-bottom: 0;
            }

            margin-bottom: 10px;

          }

          .journal-detail-info-meta {
            margin-bottom: 24px;
            font-weight: 400;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);

            display: grid;
            grid-template-columns: 6fr 3fr 4fr 4fr;
            gap: 5px 15px;

            > div {


              > span {
                display: inline-block;
                //width: 30px;
                //text-align: right;
                margin-right: 3px;
              }
            }


          }

          .journal-detail-info-content, .journal-detail-info-content .ant-typography {
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 1.5;
          }

        }


        .journal-detail-info-footer {
          display: flex;
          justify-content: flex-end;

          .journal-footer-btn {

          }

          .ant-btn {
            padding: 0 24px;
          }

          .submission-guidelines-btn {
            color: #FFFFFF;
            padding: 0;
          }
        }
      }
    }
  }


  .journal-detail-content {
    .journal-detail-content-navs-wrap {


      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      margin: 0 0 16px 0;
      background: rgba(255, 255, 255, 0.9);
    }

    .journal-detail-content-navs {
      flex: 1;
      display: flex;
      flex-wrap: nowrap;
      gap: 35px;
      padding: 0;
      margin: 0;
      list-style: none;

      width: 100%;

      > li {
        > a {
          display: block;
          padding: 0;
          height: 58px;
          line-height: 58px;
          font-weight: 400;
          font-size: 16px;
          color: #4E4E4E;
          text-decoration: none;

          &.active {
            font-weight: 600;
            font-size: 18px;
            color: #1E60C5;
            text-underline-offset: 10px;
            text-decoration: underline solid #1E60C5 3px;
          }
        }
      }
    }

    .journal-wx-btn {
      font-weight: 400;
      font-size: 14px;
      color: #4E4E4E;
      text-decoration: none;

      .anticon {
        color: #1E60C5;
      }
    }
  }
}

@media (max-width: @screen-md-max) {

  :where(.hxiw-page-layout) {
    &.bg-bule-433 {
      background-size: 100% 777px;
      background-position-y: 274px;
    }

    > .hxiw-page-content-wrapper {

      .hxiw-page-content {
        padding-top: 0;

        .journal-detail-container {
          .journal-detail-header {
            height: auto;
            padding: 0;

            .journal-detail-info {
              flex-direction: column;

              .journal-detail-info-cover {
                width: auto;
                max-height: 400px;
              }

              .journal-detail-info-body {
                width: 100%;

                .journal-detail-info-header {
                  .journal-detail-info-meta {
                    grid-template-columns: 1fr;
                    gap: 5px 15px;
                  }

                  .journal-detail-info-content {
                    .ant-typography {
                      height: 63px;
                    }
                  }
                }
              }

              .journal-detail-info-footer {
                display: block;
                margin-bottom: 24px;

                .journal-footer-btns-wrapper {
                  display: flex;

                  .journal-footer-btn {
                    display: block;
                  }
                }

              }
            }
          }

          .journal-detail-content {
            .journal-detail-content-navs-wrap {
              .journal-detail-content-navs{
                overflow: auto;
                > li > a {
                  white-space: nowrap;
                }
              }

            }

            .journal-default-layout-container {
              flex-direction: column;
            }
          }
        }
      }
    }
  }


}
